<template>
  <Spin :spinning="loading" tip="Loading...">
  <div>
    <!-- 旧件回运 - 编辑/新增 - 子页签 -->
    <TopFilter ref="TopFilters" :list="topFilterInit" :cols="3" :collapse="collapse" labelWidth="110" @filterChange="changeHandle" @onRowSelectChange="selectChange"></TopFilter>
    <BreakSpace label="旧件选择列表" :containerStyle="{ marginBottom: '10px' }" />
    <FilterTable
      ref="usedTable"
      :columns="columns"
      :params="fetchParams"
      :fetchapi="fetchApi"
      :datakey="'records'"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      selectionType="multiple"
      :height="'auto'"
    >
      <template slot="controls" slot-scope="props">
        <multiuse-button size="small" type="primary" icon="el-icon-plus" @click="saveDialog()">保存</multiuse-button>
      </template>
    </FilterTable>
    <BaseDialog :visible.sync="visibleSelectByClaim" :title="'保修旧件查看'" destroyOnClose width="850px" :containerStyle="{height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px'}">
      <selectByClaim @close="closeSelectByClaim" :rowData="rowData"></selectByClaim>
    </BaseDialog>
  </div>
  </Spin>
</template>
<script>
import { getPartType } from '@/api/dictionary';
import { getReturnListByPage,getReturnListByPageNew } from '@/api/usedPartsReturnManage/usedPartsReturn_DLR/usedPartsReturn';
import selectByClaim from './selectByClaim.vue';
import { dictionary } from '@/utils/dictMixin';
import { getAppId } from '@/assets/js/auth';
export default {
  props: ['whCode'],
  components: {
    selectByClaim
  },
  mixins: [dictionary],
  data() {
    return {
      loading: false,
      dataList: [],
      dataList1: [],
      visible: false,
      visibleDrawer: false,
      collapse: true,
      visibleSelectByClaim: false,
      infoId: null,
      topFilterInit: this.topFilterInitFun(),
      flterValue: {}, //参数
      columns: this.creatHeader(),
      // columns1: this.creatHeader1(),
      fetchApi: getReturnListByPageNew,
      fetchParams: {
        // returnType: 55851001,
        status:1,
        whCode: this.whCode
      }, //ipa 接口
      selectedRows: [],//选中服务站
      // formList: this.createFormList(),
      // formList1: this.createFormList1(),
      saveData: null,
      rowData: null,
      activeName: '审核记录',
      saveDataFile: {},
    };
  },
  async created() {
    // if (getAppId() == 'arcfox') {
    //   this.topFilterInit.find(x => x.fieldName == 'ifComm').itemList =this.createDictList('5543',[55431001])
    // }else{
    //   this.topFilterInit.find(x => x.fieldName == 'ifComm').itemList =this.createDictList('5543')
    // }
    // await this.chuqi3();
    console.log(this.whCode);
    let res = await getPartType({ type: 5501 });
    this.topFilterInit.find((x) => x.fieldName == 'cmsClaimType').itemList = res.data.map((x) => ({ value: x.codeId, text: x.codeCnDesc }));
  },
  methods: {
    //装箱属性
    async chuqi3() {
      console.log("===== 获取下拉框数据 ====== ")
      const res = await getPartType({ type: 5591 });
      console.log("==========",res)
      if (res.resultCode == 200) {
        this.columns.find(x => x.dataIndex == 'boxAttrStr').initialValue = '';
        this.columns.find(x => x.dataIndex == 'boxAttrStr').editItems = res.data.map(y => ({ text: y.codeCnDesc, value: y.codeId }));
      }
    },
    add() {},
    formChangeHandle(val) {
      console.log(val);
      this.saveData = val;
    },
    formChangeHandleFile(val) {
      console.log(val);
      this.saveDataFile = val;
    },
    //搜索获取数据
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, {status:1, whCode: this.whCode});
      console.log(val);
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
    },
    queryByNo(val) {
      this.rowData = val.claimId;
      console.log('查看明细', this.rowData);
      this.visibleSelectByClaim = true;
    },
    closeSelectByClaim() {
      this.visibleSelectByClaim = false;
    },
    //保存
    saveDialog() {
      console.log(this.selectedRows);
      if (this.selectedRows.length) {
        for(let i = 0 ; i < this.selectedRows.length; i++){
          this.selectedRows[i].cmsClaimNo = this.selectedRows[i].claimNo;
          this.selectedRows[i].cmsClaimId = this.selectedRows[i].claimId;
          // this.selectedRows[i].returnCount = this.returnCount[i];
          // console.log(this.returnCount[i])
        }
        this.loading = true;
        this.$emit('save', this.selectedRows);
      } else {
        if (!this.selectedRows.length) {
          this.$notify({
            title: '警告',
            message: '请选择旧件信息!',
            type: 'warning',
          });
          this.loading = false;
        } else {
          this.$notify({
            title: '警告',
            message: '请输入正确的回运数量!',
            type: 'warning',
          });
          this.loading = false;
        }
        this.loading = false;
      }
    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    chooseOrderNo() {
      this.visible = true;
    },
    //搜索数据
    topFilterInitFun() {
      return [
        {type: 'INPUT', label: '索赔单号', fieldName: 'claimNo', placeholder: '请输入索赔单号...', initialValue: ''},
        {type: 'SELECT', label: '索赔类型', fieldName: 'cmsClaimType', placeholder: '请选择索赔类型...', initialValue: '', itemList: []},
        {type: 'INPUT', label: '旧件代码', fieldName: 'partCode', placeholder: '请输入旧件代码...', initialValue: ''},
        {type: 'INPUT', label: '旧件名称', fieldName: 'partName', placeholder: '请输入旧件名称...', initialValue: ''},
        // {type: 'SELECT', label: '车辆属性', fieldName: 'ifComm', placeholder: '请选择...', initialValue: '', itemList: []},
      ];
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          render: (props) => {
            return (
              <div style="text-align:center">
                <multiuse-button size="mini" type="text" onClick={() => this.queryByNo(props.row)}>
                  查看
                </multiuse-button>
              </div>
            );
          },
        },
        { title: '索赔单号', dataIndex: 'claimNo', sorter: true },
        { title: 'VIN', dataIndex: 'vin', sorter: true , width: 150},
        { title: '索赔类型', dataIndex: 'cmsClaimTypeStr', sorter: true },
        {title: '旧件代码', dataIndex: 'partCode', sorter: true},
        {title: '旧件名称', dataIndex: 'partName', sorter: true},
        {title: '供应商编码', dataIndex: 'supCode', sorter: true},
        // {title: '主损件代码', dataIndex: 'mainPartCode', sorter: true},
        // {title: '主损件名称', dataIndex: 'mainPartName', sorter: true},
        {
          title: '旧件数量',
          dataIndex: 'partCount',
          // minWidth: 90,
          sorter: true,
          // editable: true,
          // defaultEditable: true,
          // showOverflowTooltip: true,
          // editType: 'input'
          width: 100
        },
        {
          title: '回运数量',
          dataIndex: 'actualPartCount',
          render: (props) => {
            return (
              <div style="text-align:center">
                <el-input
                  size="mini"  oninput ="value=value.replace(/[^0-9.]/g,'')"
                  v-model={props.row.actualPartCount}
                />
              </div>
            );
          },
        },
        // {
        //   title: '装箱属性',
        //   dataIndex: 'boxAttrStr',
        //   hidden: true,
        //   sorter: true,
        //   minWidth: 120,
        //   editable: true,
        //   defaultEditable: true,
        //   showOverflowTooltip: true,
        //   editType: 'select',
        //   editItems: []
        // },
        {
          title: '箱号',
          dataIndex: 'boxNo',
          render: (props) => {
            return (
              <div style="text-align:center">
                <el-input
                  v-model={props.row.boxNo}
                />
              </div>
            );
          },
        },
        // { title: '车辆属性', dataIndex: 'ifComm', sorter: true,filterItems: this.createDictList('5543'),
        //   dictItems: this.createDictList('5543'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.ifComm, '5543')}</span>;
        //   } },
        // { title: '维修工单号', dataIndex: 'roNo', sorter: true },
        // { title: '主损件代码', dataIndex: 'mainPartCode', sorter: true },
        // { title: '主损件名称', dataIndex: 'mainPartName', sorter: true },
        // { title: '索赔数量', dataIndex: 'partCount', sorter: true , width: 100},
        // { title: '回运数量', dataIndex: 'pestructionCount', sorter: true, editable: true, editType: 'input', defaultEditable: true },
      ];
    },
  },
};
</script>

<style lang="less" scoped></style>
